/* 
  三大阶段：
  1.挂载阶段：
  constructor：创建时
  render:渲染DOM
  componentDidMount：挂载后! 发请求、最先能够获取DOM、定时器、绑定事件
  2.更新阶段
  render:重新渲染DOM
  componentDidUpdate：更新后。可以获取到更新后的值，常用来做缓存
  3.卸载阶段：
  componentWillUnmount：做清楚的动作，如：清除定时器，取消监听事件
  执行次数：constructor和componentDidMount，componentWillUnmount只会执行一次

 */
import React from 'react';

class APP extends React.Component {
  state = {
    isShow: true,
    count: 100,
  };
  handleClick = () => {
    this.setState({
      isShow: !this.state.isShow,
    });
  };
  handleClick2 = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  // 每次组件渲染都会触发
  render() {
    return (
      <div>
        {this.state.isShow && <Child count={this.state.count}></Child>}
        <button onClick={this.handleClick}>点我卸载组件</button>
        <button onClick={this.handleClick2}>点我更新count</button>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    console.log('constructor执行了----->');
  }
  render() {
    console.log('render执行了----->');
    return (
      <div>
        <h3>子组件</h3>
        <h3>{this.props.count}</h3>
      </div>
    );
  }
  componentDidMount() {
    console.log('componentDidMount执行了----->');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate执行了----->');
  }
  componentWillUnmount() {
    console.log('componentWillUnmount执行了----->');
  }
}

export default APP;
